Skip to content

docs: fix Starter Kit spotlight card on mobile#854

Merged
bharvey88 merged 1 commit into
devfrom
docs-spotlight-card-mobile-fix
May 22, 2026
Merged

docs: fix Starter Kit spotlight card on mobile#854
bharvey88 merged 1 commit into
devfrom
docs-spotlight-card-mobile-fix

Conversation

@bharvey88
Copy link
Copy Markdown
Contributor

@bharvey88 bharvey88 commented May 22, 2026 •
edited by coderabbitai Bot
Loading

Summary

  • Wraps the desktop .apollo-esk-img overrides in @media (min-width: 701px) so they no longer compete with the mobile media query and stop the spotlight card from rendering with a desktop-sized image on phones.
  • Adds explicit resets for transform, border-radius, and object-fit inside the existing mobile media query so the stacked banner image renders cleanly under 700px.

Test plan

  • Verify on local mkdocs serve at narrow widths that the image stacks below the text as a 200px banner
  • Verify on a real phone that subhead + CTA are visible and the image isn't oversized

Summary by CodeRabbit

  • Style
    • Enhanced responsive styling to improve image display consistency across different screen sizes.

Review Change Stack

@bharvey88
docs: fix Starter Kit spotlight card on mobile
52d600e 
Wrap desktop image overrides in @media (min-width: 701px) so they stop fighting the mobile media query. Also explicitly reset transform/border-radius/object-fit in the mobile block so the stacked banner image renders cleanly.
@bharvey88 bharvey88 merged commit 3976c95 into dev May 22, 2026
1 check was pending
@bharvey88 bharvey88 deleted the docs-spotlight-card-mobile-fix branch May 22, 2026 17:43
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 22, 2026 •
edited
Loading

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 391f921e-4d25-408c-ab99-b713b4ecf6a6

📥 Commits

Reviewing files that changed from the base of the PR and between d49bbd5 and 52d600e.

📒 Files selected for processing (1)
  • docs/index.md

Walkthrough

Updated inline CSS styling for the .apollo-esk-img element across responsive breakpoints. Desktop media query rules are reformatted while preserving layout properties. Mobile media query rules explicitly enforce transform: none !important, border-radius, and object-fit to improve small-screen rendering consistency.

Changes

Responsive image styling refinement

Layer / File(s) Summary
Responsive image media queries
docs/index.md		 Desktop media query formatting is reorganized without functional change. Mobile media query (max-width: 700px) adds explicit transform: none !important and reinforces border-radius and object-fit properties for consistent small-screen image display.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

  • ApolloAutomation/docs#849: Modifies the same .apollo-esk-img CSS styling in docs/index.md with overlapping small-screen transform, border-radius, and object-fit adjustments.

Poem

🐰 A fluffy image sits so tall,
On desktop wide, on mobile small,
With transform: none and curves so true,
The Apollo folk made styling new! 🎨

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs-spotlight-card-mobile-fix

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@bharvey88